<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
	<title></title>
	<script src="js/jquery-3.2.1.min.js"></script>
	<script src="js/serverUrl.js"></script>
	<link rel="stylesheet" href="css/news.css" />
</head>
<style>
    .question{
        margin: 15px;
        font-family: KaiTi;
        line-height:30px;
        font-size: 20px;
    }
    .answer{
        margin-left: 15px;
        margin-right: 15px;
        font-family: KaiTi;
        margin-top: 15px;
        line-height:30px;
        font-size: 20px;
    }
    .answer-bg{
        border: 1px #9e9e9e solid;
        padding: 5px 5px 5px 15px;
        border-radius: 4px;
        background: #fafafa;

    }

    .answer-choose{
        border: 1px #4caf50 solid;
        padding: 5px 5px 5px 15px;
        border-radius: 4px;
        background: #e8f5e9;

    }
    .trueAnswer{
        margin: 15px;
        font-family: simhei;
        line-height:30px;
        font-size: 20px;

    }
    .questionTitle{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        background: lightgray;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .title{
        margin-left: 10px;
        margin-right: 10px;
    }

    .inputClass{
        border-radius: 5px;
        padding: 5px;
        width: 80vw;
        margin-left: 5vw;
        font-size: 20px;
        border: 1px solid #ccc;
        margin-top: 10px;
    }
	</style>
<script type="text/javascript">
		var index = 0;
		var paperData = {}
		var question = {}

		function loadPaper(paperDataString){
			paperData = paperDataString
			var size = paperData.questionList.length
			for (var i = 0;i<size;i++){
				if(paperData.questionList[i].questionType == 1) {
					var panduanAnswerList = []
					panduanAnswerList.push({'optionName':'T','answerContent':'正确','selected':false})
					panduanAnswerList.push({'optionName':'F','answerContent':'错误','selected':false}),
					paperData.questionList[i].answerList = panduanAnswerList
				}

			}



			loadQuestion(0)
		}

		function pre() {
			if(index == 0){
				let params = {
                    errorMessage: '已经是第一题了'
                }
                 WebViewJavascriptBridge.callHandler('indexError',params,function(response) {
                                       
                   });
                 return
			}
			index--
			loadQuestion(index)
            let params = {
                result: paperData
            }
            WebViewJavascriptBridge.callHandler('storeData',params);
		}

		function next(nextIndex) {
			if(index == paperData.questionList.length-1){
				let params = {
                    errorMessage: '已经是最后一题了'
                }
                 WebViewJavascriptBridge.callHandler('indexError',params,function(response) {
                                       
                   });
                 return
			}
			index++
			loadQuestion(index)
            let params = {
                result: paperData
            }
            WebViewJavascriptBridge.callHandler('storeData',params);
		}

		function answerClick(i){
			var answerId = "#answer_"+i
			var answer = question.answerList[i]
			var size = question.answerList.length
			if (question.questionType ==2 || question.questionType ==1){
				for(var j = 0;j<size;j++){
					var answerjId = "#answer_"+j
					var answerj = question.answerList[j]

					answerj.selected = false
					$(answerjId).css('color',"#616161")
					$(answerjId).addClass("answer-bg")
					$(answerjId).removeClass("answer-choose")
				}

				answer.selected = true
				$(answerId).css('color',"#388E3C")
				$(answerId).removeClass("answer-bg")
				$(answerId).addClass("answer-choose")

			}else {

				if(answer.selected == true){
					answer.selected = false
					$(answerId).css('color',"#616161")
					$(answerId).addClass("answer-bg")
					$(answerId).removeClass("answer-choose")

				}else {
					answer.selected = true
					$(answerId).css('color',"#388E3C")
					$(answerId).removeClass("answer-bg")
					$(answerId).addClass("answer-choose")
				}
			}

		}

		function loadQuestion(questionIndex){
			question = paperData.questionList[questionIndex]
			var tx = ""
			switch(question.questionType) {
				case 1:
					tx = '判断题'
					break
				case 2:
					tx = '单选题'
					break
				case 3:
					tx = '多选题'
					break
				case 4:
					tx = '计算题'
					break
				case 5:
					tx = '填空题'
					break
				case 6:
					tx = '问答题'
					break
				case 7:
					tx = '技能题'
					break
				case 8:
					tx = '简答题'
					break
				case 9:
					tx = '名词解释'
					break
				case 10:
					tx = '绘图题'
					break
				case 11:
					tx = '论述题'
					break
				case 12:
					tx = '案例分析'
					break
				case 13:
					tx = '综合题'
					break
				case 14:
					tx = '识图题'
					break
				case 15:
					tx = '选答题'
					break
				case 16:
					tx = '改错题'
					break
				case 17:
					tx = '操作题'
					break
				default:
					tx = ''
					break
			}
			$('#titleName').html(tx)
			$("#total").html(paperData.questionList.length)
			$("#index").html(questionIndex+1)
			$("#question").html(question.questionContent)


			var answerList = question.answerList
			var size = answerList.length
			var answerHtml = ""
			if(question.questionType == 1) {


				for(var i = 0;i<size;i++){
					var answer = answerList[i]
					var color = "#616161"
					var bgClass = "answer-choose"
					if(answer.selected == true){
						color = "#388E3C"
						bgClass = "answer-choose"
					}else {
						color = "#616161"
						bgClass = "answer-bg"
					}
					answerHtml+="<div style='color:"+color+"' id='answer_"+i+"' class='answer "+bgClass+"' onclick=answerClick("+i+")>"+answer.answerContent+"</div>"
					$("#selection").html(answerHtml)
				}

			} else {

				for(var i = 0;i<size;i++){
					var answer = answerList[i]
					var color = "#616161"
					var bgClass = "answer-choose"
					if(answer.selected == true){
						color = "#388E3C"
						bgClass = "answer-choose"
					}else {
						color = "#616161"
						bgClass = "answer-bg"
					}
					answerHtml+="<div style='color:"+color+"' id='answer_"+i+"' class='answer "+bgClass+"' onclick=answerClick("+i+")>"+answer.optionName+"、"+answer.answerContent+"</div>"
					$("#selection").html(answerHtml)
				}
			}

		}

		function submitTest(){
            let params = {
                result: paperData
            }
            WebViewJavascriptBridge.callHandler('submitResult',params);
		}
	</script>
<body>
<div class="questionTitle">
	<div class="title" id="titleName"></div>
	<div class="title">第 <span id="index"></span> 题/共 <span id="total"></span> 题</div>
</div>
<div class="question" id="question">
</div>
<div class="selection" id="selection">
</div>
</body>
</html>
